<!-- 党员活动台账 -->
<template>
  <div>
    <div style="padding: 10px" />
    <el-table
      v-loading="listLoading"
      :data="listArr"
      style="width: 100%"
      element-loading-text="Loading"
      border
      stripe
      fit
      highlight-current-row
      @selection-change="selectionChange"
    >
      <el-table-column
        type="selection"
        width="50px"
        align="center"
        v-if="isHasControl"
      />

      <el-table-column label="序号" type="index" width="50px" align="center" />

      <el-table-column label="活动类型" align="center" width="120px">
        <template slot-scope="scope">
          <span v-if="scope.row.activityType == 1">党员大会</span>
          <span v-if="scope.row.activityType == 2">支部委员会</span>
          <span v-if="scope.row.activityType == 3">党小组会</span>
          <span v-if="scope.row.activityType == 4">党课</span>
          <span v-if="scope.row.activityType == 5">党员统一活动日</span>
          <span v-if="scope.row.activityType == 6">特色活动</span>
        </template>
      </el-table-column>

      <el-table-column label="活动主题" align="center">
        <template slot-scope="scope">
          {{ scope.row.activityTheme ? scope.row.activityTheme : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="活动时间" align="center" width="180">
        <template slot-scope="scope">
          {{ scope.row.activityStartTime }}<br />
          至{{ scope.row.activityEndTime }}
        </template>
      </el-table-column>

      <el-table-column label="活动地点" align="center">
        <template slot-scope="scope">
          {{ getPlaceName(scope.row.activityPlace) }}
        </template>
      </el-table-column>

      <el-table-column label="参与人员" align="center" width="200">
        <template slot-scope="scope">
          <span
            v-for="(i, index) in JSON.parse(scope.row.participant)"
            :key="index"
          >
            <span v-if="i.status" style="color: #67c23a">{{ i.name }}、</span>
            <span v-else style="color: #909399">{{ i.name }}、</span>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="活动内容" align="center" width="300">
        <template slot-scope="scope">
          <div v-if="scope.row.activityContent">
            <div v-if="scope.row.activityContent.length > 50">
              <el-popover
                placement="top"
                :width="360"
                trigger="hover"
                :content="scope.row.activityContent"
              >
                <template #reference>
                  <p>{{ scope.row.activityContent.substring(0, 50) }}...</p>
                </template>
              </el-popover>
            </div>
            <div v-else>
              <p>{{ scope.row.activityContent }}</p>
            </div>
          </div>
          <p v-else>--</p>
        </template>
      </el-table-column>

      <el-table-column label="活动照片" align="center" width="260">
        <template slot-scope="scope">
          <span
            v-for="(i, index) in JSON.parse(scope.row.coverUrl)"
            :key="index"
          >
            <el-image
              style="width: 80px; height: 80px"
              :src="i"
              @click="seeImg(JSON.parse(scope.row.coverUrl))"
              :preview-src-list="srcList"
            >
            </el-image>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="附件" align="center">
        <template slot-scope="scope">
          <div
            v-for="(i, index) in JSON.parse(scope.row.accessoryUrl)"
            :key="index"
          >
            <span @click="prewFile(i)">{{ i.accessoryName }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" v-if="!isHasControl">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.activityStatus != 3"
            style="width: 80px; height: 80px"
            :src="scope.row.qrCodeUrl"
            @click="seeImg([scope.row.qrCodeUrl])"
            :preview-src-list="srcList"
          >
          </el-image>
          <el-tag v-if="scope.row.activityStatus == 1">未开始</el-tag>
          <el-tag v-if="scope.row.activityStatus == 2" type="success"
            >进行中</el-tag
          >
          <el-tag v-if="scope.row.activityStatus == 3" type="info"
            >已结束</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="发布时间" prop="updateTime" align="center">
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div v-if="isHasControl">
            <el-link type="primary" @click="seeInfo(scope.row)">详情</el-link>
            <p></p>
            <el-link type="danger" @click="delInfo(scope.row.dqActivityId)"
              >删除</el-link
            >
          </div>
          <div v-else>
            <el-link
              v-if="scope.row.activityStatus == 1"
              type="danger"
              @click="revocation(scope.row.dqActivityId)"
              >撤销</el-link
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import { serverUrl } from "@/look";

export default {
  components: {},
  props: {
    listLoading: {
      type: Boolean,
      default: false,
    },
    // 数据
    listArr: {
      type: Array,
      default: () => [],
    },
    // 是否包含操作功能
    isHasControl: {
      type: Boolean,
      default: false,
    },
    PlaceListArr: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      srcList: [],
      participant: [],
    };
  },
  watch: {},
  created() {},
  methods: {
    // 查看详细信息
    seeInfo(row) {
      this.$emit("seeInfoFun", row);
    },

    // 撤销
    revocation(id) {
      this.$emit("revocation", id);
    },

    // 删除
    delInfo(dqActivityId) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$emit("delOne", dqActivityId);
      });
    },

    // 通过地点id获取地点名称
    getPlaceName(placeId) {
      const place = this.PlaceListArr.find((item) => item.id == placeId);
      if (place) {
        return place.name;
      }
    },

    // 打开草稿箱
    toDrafts() {
      this.$emit("change", "Drafts");
    },

    selectionChange(val) {
      let ids = val.map((v) => v.dqActivityId);
      this.$emit("chooseDel", ids);
    },

    prewFile(file) {
      const extArr = [
        "swf",
        "avi",
        "flv",
        "mpg",
        "rm",
        "mov",
        "wav",
        "asf",
        "3gp",
        "mkv",
        "rmvb",
        "mp4",
        "jpg",
        "jpeg",
        "png",
        "gif",
      ];
      let name = file.accessoryName;
      const ext = name.substr(name.lastIndexOf(".") + 1); // 获取文件后缀名
      if (extArr.indexOf(ext) > -1) {
        window.open(file.accessoryUrl); // 在新标签页中打开文件
      } else {
        window.open(
          serverUrl +
            "onlinePreview?url=" +
            encodeURIComponent(Base64.encodeURI(file.accessoryUrl))
        );
      }
    },

    // 查看列表中的图片
    seeImg(imgSrc) {
      this.srcList = imgSrc;
    },
  },
};
</script>
